<template>
  <div class="home-container">
    <div class="header">
      <h1>欢迎回来</h1>
      <button @click="handleLogout" class="logout-btn">登出</button>
    </div>
    
    <div class="content">
      <div v-if="userInfo" class="user-card">
        <h2>用户信息</h2>
        <div class="info-item">
          <span class="label">ID:</span>
          <span class="value">{{ userInfo.id }}</span>
        </div>
        <div class="info-item">
          <span class="label">用户名:</span>
          <span class="value">{{ userInfo.username }}</span>
        </div>
        <div class="info-item">
          <span class="label">邮箱:</span>
          <span class="value">{{ userInfo.email || '未设置' }}</span>
        </div>
        <div class="info-item">
          <span class="label">是否管理员:</span>
          <span class="value">{{ userInfo.is_staff ? '是' : '否' }}</span>
        </div>
        <div class="info-item">
          <span class="label">注册时间:</span>
          <span class="value">{{ userInfo.date_joined }}</span>
        </div>
        <div class="info-item">
          <span class="label">上次登录:</span>
          <span class="value">{{ userInfo.last_login || '首次登录' }}</span>
        </div>
      </div>
      
      <div v-else class="loading">
        <p>加载中...</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { authApi, type UserInfo } from '../api/auth'

// 用户信息
const userInfo = ref<UserInfo | null>(null)

/**
 * 获取用户信息
 */
const fetchUserInfo = async () => {
  try {
    const response = await authApi.getUserInfo()
    console.log('获取用户信息成功:', response)
    userInfo.value = response.data
    
    // 更新localStorage
    localStorage.setItem('userInfo', JSON.stringify(response.data))
  } catch (error: any) {
    console.error('获取用户信息失败:', error)
    
    // 如果未登录，跳转到登录页
    if (error.message.includes('未登录') || error.message.includes('401')) {
      alert('请先登录')
      window.location.hash = '#/login'
    }
  }
}

/**
 * 处理登出
 */
const handleLogout = async () => {
  try {
    await authApi.logout()
    console.log('登出成功')
    
    // 清除本地存储
    localStorage.removeItem('userInfo')
    
    // 跳转到登录页
    window.location.hash = '#/login'
  } catch (error: any) {
    console.error('登出失败:', error)
    alert(error.message || '登出失败')
  }
}

// 组件挂载时获取用户信息
onMounted(() => {
  // 先尝试从localStorage读取
  const cached = localStorage.getItem('userInfo')
  if (cached) {
    userInfo.value = JSON.parse(cached)
  }
  
  // 然后从服务器获取最新信息
  fetchUserInfo()
})
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 800px;
  margin: 0 auto 40px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 10px;
}

.header h1 {
  color: white;
  margin: 0;
  font-size: 28px;
}

.logout-btn {
  padding: 10px 24px;
  background: white;
  color: #667eea;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.logout-btn:hover {
  background: #f0f0f0;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.content {
  max-width: 800px;
  margin: 0 auto;
}

.user-card {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.user-card h2 {
  color: #333;
  margin-bottom: 24px;
  font-size: 22px;
  border-bottom: 2px solid #667eea;
  padding-bottom: 10px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-item .label {
  color: #666;
  font-weight: 500;
}

.info-item .value {
  color: #333;
  font-weight: 600;
}

.loading {
  text-align: center;
  color: white;
  font-size: 18px;
  padding: 40px;
}
</style>